<template>
  <div id="city">
    <Headers>国家地区</Headers>
    <Lists :ListItem="lists" @click="goto($event)"></Lists>
  </div>
</template>

<script>
import Lists from "@/components/Lists";
export default {
  name: "city",
  data() {
    return {
      lists: [
        {
          listName: "中国大陆",
          listDetail: "+86",
          showReturn: true,
          path:'',
          returnColor: "#A2C0B8"
        },
        {
          listName: "中国香港",
          listDetail: "+855",
          path:'',
          showReturn: true,
          returnColor: "#A2C0B8"
        },
        {
          listName: "中国澳门",
          listDetail: "+853",
          path:'',
          showReturn: true,
          returnColor: "#A2C0B8"
        },
        {
          listName: "中国台湾",
          listDetail: "+852",
          path:'',
          showReturn: true,
          returnColor: "#A2C0B8"
        },
        {
          listName: "美国",
          listDetail: "+001",
          path:'',
          showReturn: true,
          returnColor: "#A2C0B8"
        }
      ]
    };
  },
  methods:{
      goto(e){
        sessionStorage.getCity = JSON.stringify(e);
        this.$store.dispatch('GETCITYDATA', e)
        this.$router.go(-1);
      }
  },
  components: {
    Lists
  }
};
</script>

<style scoped lang="stylus">
@import '../common/styl/mixin';
#city
    padding-top rem(50)
</style>
